<template>
	<el-tabs value="first">
		<el-tab-pane label="权益使用记录" name="first">
			<el-table class="mt-20 el-table-modify" :data="equityData" border>
				<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
				<el-table-column prop="orderCode" align="center" label="订单ID"></el-table-column>
				<el-table-column prop="privilegeName" align="center" label="权益类型"></el-table-column>
				<el-table-column prop="cinemaName" align="center" label="站点名称"></el-table-column>
				<el-table-column prop="amount" align="center" label="数量"></el-table-column>
				<el-table-column prop="actualCost" align="center" label="实际付款金额"></el-table-column>
				<el-table-column align="center" label="状态">
					<template slot-scope="scope">{{status(scope.row)}}</template>
				</el-table-column>
				<el-table-column prop="useDate" align="center" label="下单时间">
					<template slot-scope="scope">{{scope.row.useDate | dateFrm}}</template>
				</el-table-column>
				<el-table-column label="操作" align="center" fixed="right" width="72">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="linToDetail(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				ref="equityPagination"
				class="mt-20"
				background
        :page-size.sync="equityPage.pageSize"
				:total="equityPage.total"
				@size-change="onEquitySizeChange"
				@current-change="onEquityPageChange"
				layout="slot,->,prev,pager,next,sizes,jumper"
			>
				<span
					class="pagination-title"
				>共 {{equityPage.total}} 条记录 第 {{equityPage.page + 1}} / {{equityPage.pageTotal}} 页</span>
			</el-pagination>
		</el-tab-pane>
		<el-tab-pane label="常去站点" name="second">
			<el-table class="mt-20 el-table-modify" :data="cinemaData" border>
				<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
				<el-table-column prop="privilegeName" align="center" label="权益类型"></el-table-column>
				<el-table-column prop="cinemaName" align="center" label="站点名称"></el-table-column>
				<el-table-column prop="goAmount" align="center" label="次数"></el-table-column>
				<el-table-column prop="totalCost" align="center" label="实际消费金额"></el-table-column>
			</el-table>
			<!-- <el-pagination
				ref="cinemaPagination"
				class="mt-20"
				background
        :page-size.sync="cinemaPage.pageSize"
				:total="cinemaPage.total"
				@size-change="onCinemaSizeChange"
				@current-change="onCinemaPageChange"
				layout="slot,->,prev,pager,next,sizes,jumper"
			>
				<span
					class="pagination-title"
				>共 {{cinemaPage.total}} 条记录 第 {{cinemaPage.page + 1}} / {{cinemaPage.pageTotal}} 页</span>
			</el-pagination> -->
		</el-tab-pane>
	</el-tabs>
</template>

<script>
import moment  from 'moment';
import {memberPivilegeDetails, memberCinema} from '@/api/member';
export default {
  name: 'MemberEquityDetail',
  data() {
    return {
      equityData: [],
      equityPage: {
        page: 0,
        pageSize: 20,
        total: 0,
        pageTotal: 1
      },
      cinemaData: [],
      cinemaPage: {
        page: 0,
        pageSize: 20,
        total: 0,
        pageTotal: 1
      }
    }
  },
  methods: {
    status(row) {
      return Date.now() >= Date.parse(row.endTime) ? '已完成' : '未完成'
    },
    async requestEquityData(id) {
      const {page, pageSize : size} = this.equityPage
      const {data, total} = await memberPivilegeDetails(id, {page, size})
      this.equityData = data;
      this.equityPage.total = total;
      this.equityPage.pageTotal = total ? Math.ceil(total / size) : 1;

      if (this.$refs.equityPagination) {
        let childrenRefs = this.$refs.equityPagination.$children
      this.$nextTick(() => {
        childrenRefs.forEach(child => child.$forceUpdate())
      });
      }
    },
    onEquitySizeChange(size) {
      this.equityPage.pageSize = size;
      this.requestEquityData();
    },
    onEquityPageChange(page) {
      this.equityPage.page = page;
      this.requestEquityData();
    },
    async requestCinemaData(id) {
      // const {page, pageSize : size} = this.cinemaPage
      // const {data, total} = await memberCinema(id, {page, size})
      const {data, total} = await memberCinema(id)
      this.cinemaData = data;
      // this.cinemaPage.total = total;
      // this.cinemaPage.pageTotal = total ? Math.ceil(total / size) : 1;
      // if (this.$refs.cinemaPagination) {
      //   let childrenRefs = this.$refs.cinemaPagination.$children
      //   this.$nextTick(() => {
      //     childrenRefs.forEach(child => child.$forceUpdate())
      //   });
      // }
    },
    onCinemaSizeChange(size) {
      this.cinemaPage.pageSize = size;
      this.requestEquityData();
    },
    onCinemaPageChange(page) {
      this.cinemaPage.page = page;
      this.requestEquityData();
    },
    linToDetail(row) {
      if(row.id) {
        this.$router.push({ name: "movieOrderDetail", params: { id: row.id || ''}});
      }
    }
  },
  created() {
    if (this.$route.name === 'memberEquityDetail') {
      let {id} = this.$route.params;
      if (id) {
        this.requestEquityData(id);
        this.requestCinemaData(id);
      } else {
        this.$router.go(-1);
      }
    }
  }
}
</script>

<style>
</style>